<template>
    <div class="registerbody">
        <div class="registerdata">
            <div class="registertext">
                <h2>Register</h2>
            </div>
            <div class="formdata">
                <el-form>
                    <el-form-item>
                        <el-input
                            v-model="user.userName"
                            placeholder="请输入用户名"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input
                            v-model="user.userPassword"
                            clearable
                            placeholder="请输入密码"
                            show-password
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input
                            v-model="user.confirmPassword"
                            clearable
                            placeholder="请确认密码"
                            show-password
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="butt">
                <el-button type="primary" @click.native.prevent="register">注册</el-button>
                <el-button class="shou" @click="login">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { userRegister } from '../../api/user'

export default {
  name: 'apply',
  data () {
    return {
      user: {
        userName: '',
        userPassword: '',
        confirmPassword: ''
      },
      illegal: '`~!@#$%^&*()_+-=【】、{}|：“；‘《》？/。，<>?.,":;[]（）——·！……',
      i: 0
    }
  },
  methods: {
    register () {
      if (!this.user.userName) {
        this.$message.error('用户名不能为空，请输入用户名')
        return
      }
      for (this.i = 0; this.i < this.illegal.length; this.i++) {
        if (this.user.userName.indexOf(this.illegal.charAt(this.i)) !== -1) {
          this.$message.error('用户名存在非法字符，请重新输入')
          return
        }
      }
      if (!this.user.userPassword) {
        this.$message.error('密码不能为空，请输入密码')
        return
      }
      if (this.user.userPassword.length < 6) {
        this.$message.error('密码长度必须大于等于6个字符，请重新输入')
        return
      }
      if (this.user.userPassword.length > 18) {
        this.$message.error('密码长度不能超过18个字符，请重新输入')
        return
      }
      for (this.i = 0; this.i < this.illegal.length; this.i++) {
        if (this.user.userPassword.indexOf(this.illegal.charAt(this.i)) !== -1) {
          this.$message.error('密码存在非法字符，请重新输入')
          return
        }
      }
      // 确保两次密码一致
      if (this.user.userPassword !== this.user.confirmPassword) {
        this.$message.error('两次输入的密码不一致，请重新输入')
        return
      }

      // 调用注册接口
      const userData = {
        userName: this.user.userName,
        userPassword: this.user.userPassword
      }

      userRegister(userData)
        .then((res) => {
          console.info(res)
          if (res) {
            this.$message.success('注册成功，请登录')
            this.$router.push({ path: '/login' })
          } else {
            this.$message.error(res.message || '用户名已存在，请重新注册')
          }
        })
        .catch((error) => {
          console.error('请求失败:', error) // 打印错误以便调试
          this.$message.error('请求失败，请稍后重试')
        })
    },
    login () {
      // 点击登录时跳转到登录页面
      this.$router.push({path: '/login'})
    }
  }
}
</script>

<style scoped>
.registerbody {
    width: 100%;
    height: 100%;
    min-width: 1000px;
    background-image: url("../../assets/images/mo.jpg");
    background-size: 100% 100%;
    background-position: center center;
    overflow: auto;
    background-repeat: no-repeat;
    position: fixed;
    line-height: 100%;
    padding-top: 150px;
}

.registertext {
    margin-bottom: 20px;
    line-height: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bolder;
    color: white;
    text-shadow: 2px 2px 4px #000000;
}

.registerdata {
    width: 400px;
    height: 300px;
    transform: translate(-50%);
    margin-left: 50%;
}

.butt {
    margin-top: 10px;
    text-align: center;
}

.shou {
    cursor: pointer;
    color: #606266;
}
</style>
